<template>
  <div class="param_compare_detail">
    <one-title title="工艺参数对比" @refreshData="init">
      <div class="mes_btn">
        <el-button @click="back">
          返回
        </el-button>
        <el-button
          :disabled="isEmpty || isLoading"
          @click="exportCompareDetail"
        >
          导出表格
        </el-button>
      </div>
    </one-title>
    <div class="table_container fixed_top_56">
      <el-table
        :max-height="tableMaxHeight"
        :data="tableData"
        v-loading="isLoading"
        style="width: 100%; margin-top: 20px"
        border
        header-cell-class-name="multi_line_header_cell"
        tooltip-effect="dark">
        <el-table-column
          :key="index"
          v-for="(col, index) of colConfigArr"
          :prop="col.prop"
          min-width="150"
          align="center"
          :fixed="index === 0?'left':false"
          show-overflow-tooltip>
          <template slot="header" slot-scope="scope">
            <div v-html="col.label"></div>
          </template>
          <template slot-scope="scope">
            <template v-if="scope.row[col.prop] === '是'||scope.row[col.prop] === '否'">
              <span class="block_label_color small_label" :class="stateColor(scope.row[col.prop])">{{scope.row[col.prop]}}</span>
            </template>
            <template v-else>{{scope.row[col.prop]}}</template>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-unused-vars */

import mockResult from './mockresult'
import mockResult2 from './mockresult2'
import mockResult3 from './mockresult3'
import postDataMock from './postDataMock'
import {BoolType} from '../../../../components/mesDict'
import utils from './utils'

// 获取比较结果
let interfaceGetResult = 'a/workstageparamrecord/workstageParamRecord/compare'
// 导出对比表格
let interfaceDownloadResult = 'a/workstageparamrecord/workstageParamRecord/exportasexcel'

export default {
  name: 'ParamCompareDetail',
  data() {
    return {
      isLoading: false,
      isEmpty: false,
      colConfigArr: [], // 列的label、prop数组
      tableData: [], // 列表数据
      records: [], // 列表记录值
      label: [], // 列表表头
    }
  },
  components: {
    BoolType,
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      // let result = mockResult
      // let result = mockResult2
      // let result = mockResult3
      let result = await this.getResult()
      this.records = result.records
      this.label = result.label
      this.colConfigArr = this.generateColConfigArr()
      this.tableData = this.generateTableData()
    },
    // 构建列配置数组
    generateColConfigArr() {
      return this.label.reduce((pre, label, index) =>
        [...pre, {label, prop: `col${index}`}], [])
    },
    // 构建列表数据
    generateTableData() {
      return this.records.reduce((rows, row) =>
        [...rows, this.buildRowObj(row)], [])
    },
    // 将列表记录转换为行对象
    buildRowObj(row) {
      return row.reduce((rowObj, colValue, index) => {
        rowObj[`col${index}`] = colValue
        return rowObj
      }, {})
    },
    // 获取对比结果
    getResult() {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: interfaceGetResult,
        data: utils.generatePostData(this.$store.state.paramCompare.targetTableData),
        // data: postDataMock,
        noCommit: true
      }
      return this.$store.dispatch('saveData', postData).then(res => {
        this.isEmpty = false
        return res.data
      }).catch(() => {
        this.isEmpty = true
        return {records: [], label: []}
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 取消并关闭页面
    back() {
      this.backToList().then(() => {
        this.$store.dispatch('delCurrentViews', this.$route).then(() => {
          this.$router.push('/paramCompare')
        })
      })
    },
    // 导出表格
    exportCompareDetail() {
      let postData = {
        method: 'post',
        url: interfaceDownloadResult,
        data: {
          records: this.records, // 列表记录值
          label: this.label, // 列表表头
        },
        responseType: 'blob',
        noCommit: true
      }
      return this.$store.dispatch('saveData', postData).then(res => {
        this.$downFile(res, '对比结果' + this.moment(window.serverTime).format(' YYYY-MM-DD hh:mm:ss') + '.xls')
      })
    },
    // 根据是否类型返回相应class
    stateColor(value) {
      switch (value) {
        case '是':
          return 'bool_type_true'
        case '否':
          return 'bool_type_false'
        default:
          return ''
      }
    }
  }
}
</script>

<style lang="less">
  .param_compare_detail {
    th.multi_line_header_cell {
      .cell, div {
        height: auto !important;
        line-height: normal !important;
      }
    }
    // 是
    @boolTypeTrue: #00b4ff;
    // 否
    @boolTypeFalse: #7e8e9f;
    .block_label_color {
      min-width: 20px !important;
      height: 18px !important;
      line-height: 18px;
      padding: 0 !important;
      /* 是否类型颜色 */
      // 是
      &.bool_type_true {
        background-color: @boolTypeTrue;
      }
      // 否
      &.bool_type_false {
        background-color: @boolTypeFalse;
      }
    }
  }
</style>
